<template>
  <div>
    <el-popover trigger="click" placement="right" title="选择上传目录" width="250" @show="getCatalogue" :show-after="300">
		<template #reference>
			<div style="display:flex;">
				<el-input v-model="nodeTitle" :placeholder="placeholder" readonly :disabled="disabled" ></el-input>
			</div>
		</template>
	  <el-container>
		  <el-header>
			  <el-input placeholder="输入关键字进行过滤" v-model="nodeFilterText" clearable></el-input>
		  </el-header>
		  <el-main class="nopadding">
			  <el-tree ref="tree" class="menu" :props="nodeProps" node-key="id" :data="nodes"
					   :current-node-key="''" :highlight-current="true" :expand-on-click-node="false"
					   :filter-node-method="nodeFilterNode" @node-click="nodeClick"></el-tree>
		  </el-main>
	  </el-container>
    </el-popover>
  </div>
</template>

<script>
export default {
	name:"catalogueTree",
	emits: ['selectOne'],
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: "点击选择上传目录"
    },
	disabled:{
		type:Boolean,
		default:false
	},
	params:{
		type:Object,
		default:null
	}
  },
  data() {
    return {
	  nodeTitle: "",
	  nodeFilterText: '',
	  nodes:[],
		nodeProps: {
			label: (data)=>{
				return data.title
			}
		},
    };
  },
	mounted() {
	},
	watch: {
		nodeFilterText(val) {
			this.$refs.tree.filter(val);
		}
	},
  methods: {
	  async getCatalogue(){
		  var res = await this.$API.file.catalogue.tree.get(this.params);
		  this.nodes = res.data;
	  },
	  setData(data){
		  this.nodeTitle = data.title;
		  this.$emit('selectOne', data)
	  },
	  //树过滤
	  nodeFilterNode(value, data){
		  if (!value) return true;
		  return data.title.indexOf(value) !== -1;
	  },
	  //树点击事件
	  nodeClick(data){
		  this.nodeTitle = data.title;
		  this.$emit('selectOne', data)
	  },
  }
};
</script>

<style >
</style>

